<template>
  <div ref="editor"></div>
</template>

<script>
  import E from "wangeditor"

  export default {
    name: 'TextEditor',
    props: {
      value: {
        type: String,
        required: true,
      },
      dataLoaded: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        editor: null,
      }
    },
    mounted() {
      this.initEditor()
    },
    methods: {
      initEditor() {
        const editor = new E(this.$refs.editor)
        editor.config.onchange = value => {
          this.$emit('input', value)
        }
        editor.create()
        this.editor = editor
        this.editor.txt.html(this.value) // 加载默认值
      },
    },
    watch: {
      dataLoaded() { // 加载编辑的课程详情信息，只同步一次
        if (this.dataLoaded) {
          this.editor.txt.html(this.value)
        }
      }
    }
  }
</script>
